﻿
<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north',border:false" style="height: 140px; border-bottom-width: 1px; padding: 10px; font-size: 14px;">
        <a class="easyui-linkbutton" data-options="iconCls:'icon-search'" href="/Datagrid/ViewExtEditSource" target="_blank">点击查看扩展代码</a>
        <a class="easyui-linkbutton" data-options="iconCls:'icon-search'" href="/Datagrid/ViewDatagridCssSource" target="_blank">点击查看扩展样式</a>
        <br />
        js依赖项：
        <br />
        [query-1.11.0.js]、[jquery.jdirk.js]、[jquery.easyui.min.js]、[jeasyui.extensions.datagrid.editors.js]、[jeasyui.extensions.datagrid.extEdit.js]

        <br /><br />
        css依赖项：
        <br />
        [jeasyui.extensions.datagrid.css]
    </div>
    <div data-options="region:'center',border:false,title:'此处仅显示“功能演示”选项卡所示功能基于本扩展的实现源码'" style="padding: 15px; font-size: 14px;">
        <a href="~/Demos/ExtensionDemos/Datagrid/ExtEditDemo.rar" target="_self">下载本扩展功能演示Demo</a>
        <br />
        <div style="font-size: 17px; font-weight: bold; margin-top: 15px;margin-bottom:10px;">
            扩展属性API
        </div>
        <table class="tableAPI">
            <tr class="title">
                <td style="width:10%;">名称</td>
                <td style="width: 10%;">类型</td>
                <td>描述</td>
                <td style="width: 7%;">默认值</td>
            </tr>
            <tr>
                <td>extEditing</td>
                <td>Boolean 类型</td>
                <td>
                    该属性表示在触发 beginEdit 事件后，是否构建仿 ext-grid-rowediting 行编辑的“保存”和“取消”按钮面板。
                </td>
                <td>true</td>
            </tr>
            <tr>
                <td>singleEditing</td>
                <td>Boolean 类型</td>
                <td>
                    该属性表示在一个时刻是否只允许一行数据开启编辑状态(当某行数据开启编辑状态时，其他正在编辑的行将会被自动执行 endEdit 操作)。
                </td>
                <td>true</td>
            </tr>
            <tr>
                <td>autoFocusField</td>
                <td>Boolean 类型或 String 类型</td>
                <td>
                    该属性表示在对某行执行 beginEdit 后，是否让特定字段的编辑器对象自动获取输入焦点。<br />
                    如果是 Boolean 类型，则表示是否启用编辑器对象自动获取焦点功能，在值为 true 的情况下该行的第一个编辑器对象将在 beginEdit 操作后自动获取焦点；<br />
                    如果是 String 类型，其值表示指定的 field 名称，则表示启用该功能并且指定的 field 将在 beginEdit 操作后自动获取焦点；
                </td>
                <td>true</td>
            </tr>
        </table>
        <div style="font-size: 17px; font-weight: bold; margin-top: 15px;margin-bottom:10px;">
            扩展方法API
        </div>
        <table class="tableAPI">
            <tr class="title">
                <td style="width:10%;">名称</td>
                <td style="width:5%;">重写</td>
                <td style="width:7%;">参数</td>
                <td>描述</td>
            </tr>
            <tr>
                <td>beginEdit</td>
                <td>是</td>
                <td>index</td>
                <td>
                    重写 easyui-datagrid 的原生方法 beginEdit ，以支持自定义属性 extEditing、singleEditing、autoFocusField 的扩展功能。
                </td>
            </tr>
            <tr>
                <td>endEdit</td>
                <td>是</td>
                <td>index</td>
                <td>
                    重写 easyui-datagrid 的原生方法 endEdit ，以支持自定义属性 extEditing 的扩展功能。
                </td>
            </tr>
            <tr>
                <td>cancelEdit</td>
                <td>是</td>
                <td>index</td>
                <td>
                    重写 easyui-datagrid 的原生方法 cancelEdit ，以支持自定义属性 extEditing 的扩展功能。
                </td>
            </tr>
        </table>
    </div>
</div>
